<template>
  <div class="preview">
    <div class="preview__content">
      <div class="bg" />
      <div class="preview__content__header">
        <div class="title-box">
          <div class="line" />
          <div class="title">
            <svg-icon icon-class="visitor-rule" />
            <span>访客须知</span>
          </div>
          <div class="line" />
        </div>

        <div class="notice">
          <NoticeList
            :list="visitorNotice"
          />
        </div>

        <div class="rule-details">
          <div class="rule-details__title">规则详情</div>
          <RuleDetailsList
            :list="visitorRules"
          />
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import NoticeList from '@/views/visitRule/components/NoticeList.vue'
import RuleDetailsList from '@/views/visitRule/components/RuleDetailsList.vue'
export default {
  name: '',
  components: {
    NoticeList,
    RuleDetailsList
  },
  props: {

    visitorNotice: {
      type: Array,
      default: () => ([])
    },

    visitorRules: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      backgroundImage: 'https://obs-user-test.obs.cn-east-3.myhuaweicloud.com:443/test_1708566124_UyscDj945d.png'
    }
  }
}
</script>
<style lang="scss" scoped>
* {
  font-family: HONOR Sans CN, HONOR Sans CN;
}
.preview {
  width: 354px;
  height: 714px;
  background-image: url("https://obs-user-test.obs.cn-east-3.myhuaweicloud.com:443/test_1708566124_UyscDj945d.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  padding: 107px 21px 29px 21px;

  &__content {
    position: relative;
    height: 100%;
    margin: 0 auto;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .bg {
      position: absolute;
      top: 0;
      z-index: 0;
      width: 100%;
      height: 169px;
      background-color: #2F88FF;
    }
    &__header {
      margin-top: 33px;
      position: relative;
      z-index: 1;
      padding: 0 16px;

      .title-box {
        display: flex;
        justify-content: center;
        align-items: center;

        .line {
          width: 84px;
          height: 1px;
          transform: scaleY(.75);
          background-color: rgba(#fff, .5);
        }

        .title {
          margin: 0 10px;
          >span {
            margin-left: 10px;
            font-size: 16px;
            font-weight: 700;
            color: rgba(#fff, .9);
          }
        }

      }

      .notice {
        margin-top: 18px;
        padding: 25px 15px;
        border-radius: 0 0 6px 6px;
        background: linear-gradient(180deg, #C5DEFF 0%, #FFFFFF 18%);
        box-shadow: 0 0 6px 0 rgba(0,0,0,0.12);
        min-height: 184px;
        &:before {
          content: ' ';
          width: 100%;
          height: 8.8px;
          position: absolute;
          top: 32px;
          left: 0;
          transform: scaleX(.93);
          border-radius: 43px;
          background: #2F88FF;
          box-shadow: inset 0px 2px 4px 0px rgba(0,55,130,0.3), inset 0px -2px 10px 0px rgba(0,55,130,0.3);
          z-index: -1;
        }
      }

      .rule-details {
        margin-top: 32px;
        &__title {
          font-weight: 700;
          color: #303133;
          font-size: 14px;
          margin-bottom: 16px;
        }

      }
    }
  }
}

::v-deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}
</style>
